<template>
  <div class="home-pc">
    <!-- <div class="home-header">
      <div class="home-header-content">
        <div class="header-left">
          <el-image style="height: 84px" :src="url" />
        </div>
        <div class="header-right"><headerMenu></headerMenu></div>
      </div>
    </div> -->

    <div class="home-content">
      <div class="carousel-content">
        <userBox class="user-box-component" v-if="useinfo.username" @logoutInfo="logoutInfo">
        </userBox>
        <loginBox class="user-box-component" @upUserInfo="upUserInfo" v-else> </loginBox>

        <div class="centent-carousel"><carousel :itemList="bannerListData"> </carousel></div>
      </div>
      <div class="home-content-box">
        <div class="home-content-right">
          <div class="fine-newgame">
            <tabTitle :titilText="$t('Listgames')"> </tabTitle>
            <div class="newgame-list">
              <el-row :gutter="20">
                <el-col :span="3" v-for="(item, index) in gameData" :key="index">
                  <!-- 123123 -->
                  <GameItem class="application-box-introduce" :itemData="item"> </GameItem>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>
    <commonFooter></commonFooter>
    <!-- <div class="footer">
      <div class="footer-mid">
        <img
          src="../../../assets/imgs/sysgamer-logo.png"
          style="width: 278px; height: 84px; float: left"
        />

        <div style="float: left; height: 60px; line-height: 60px">
          <dd>
            <p>
              <a href="https://www.91easyplay.com/privacy-cn.php" style="color: white">{{
                $t('privacypolicy')
              }}</a>
              &nbsp;&nbsp;| &nbsp;&nbsp;
              <a href="/pc.php?g=&amp;m=Play&amp;a=about" style="color: white">{{
                $t('AboutUs')
              }}</a
              >&nbsp;&nbsp;|&nbsp;
              <a href="/pc.php?g=&amp;m=Play&amp;a=service" style="color: white">{{
                $t('termsservice')
              }}</a
              >&nbsp;&nbsp;|&nbsp;&nbsp;

              <a href="/pc.php?g=&amp;m=Play&amp;a=concat" style="color: white">{{
                $t('contactus')
              }}</a>
            </p>
          </dd>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useAuth } from '@/use/useAuth'
import { computed } from 'vue'

import carousel from './components/carousel.vue'

import tabTitle from './components/tabTitle.vue'

import loginBox from '@/components/PCcomponents/loginBox.vue'
import commonFooter from '@/components/PCcomponents/commonFooter.vue'
import userBox from '@/components/PCcomponents/userBox.vue'
import GameItem from './components/gameItem.vue'
import { useUserStore } from '@/stores/user'
import { fetchBannerList, fetchGameList } from '@/api/game'

const store = useUserStore()
const user = computed(() => store.getUserInfo)

console.log(user, 123)
const useinfo = ref({
  user_id: user.value.user_id,
  username: user.value.username,
})
let buttonColo = ref('#f5f5f5')

let textColor = ref('#818181')

// 获取首页banner（轮播图）列表
let bannerListData = ref([])
const getBannerList = async () => {
  let data = await fetchBannerList({})
  console.log(data, 'bannerListData')
  bannerListData.value = data
}
getBannerList()

// 获取首页"新游推荐"列表
let gameData = ref([])
const getNewList = async () => {
  let data = await fetchGameList({})
  console.log(data, 'gameData')
  gameData.value = data
}
getNewList()

const upUserInfo = (data) => {
  useinfo.value.user_id = data.user_id
  useinfo.value.username = data.username
}
const logoutInfo = (data) => {
  useinfo.value = {}
}
</script>
<style lang="scss" scoped>
.home-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #f6f6f6;
  font-weight: 300;
  font-size: 15px;
  .home-content {
    width: 1200px;
  }
  .home-header {
    display: flex;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    .home-header-content {
      display: flex;
      align-items: center;
      justify-content: center;

      width: 1200px;
    }
    .header-left {
      width: 288px;
      padding-right: 40px;
    }
    .header-right {
      flex: 1;
    }
  }
  .home-content-box {
    display: flex;
    margin-top: 10px;
    .home-content-left {
      width: 270px;

      height: 500px;
      margin-right: 10px;

      .home-content-events {
        background: #fff;
        padding: 10px 10px;
      }
      .home-content-welfare {
        background: #fff;
        padding: 10px 10px;
        margin-top: 16px;
      }
    }
    .home-content-right {
      flex: 1;

      .fine-game {
        background: #fff;
        padding: 18px;
      }
    }
  }
  .carousel-content {
    display: flex;
    flex-direction: row;
    .user-box-component {
      background: #fff;
      // height: 320px;
      display: flex;
      width: 300px;
      margin-right: 16px;
    }
    .centent-carousel {
      flex: 1;
    }
  }
}
.game-list {
  display: flex;
  .game-list-item {
    flex: 1;
    margin-right: 16px;
  }

  .game-list-item:last-child {
    /* 在这里编写样式 */
    margin-right: 0;
  }
}

.fine-newgame {
  /* 在这里编写样式 */
  padding: 14px 18px 16px 18px;
  margin-right: 0;
  margin-top: 16px;
  background: #fff;
  .newgame-list {
    display: flex;
    width: 100%;
    .el-row {
      display: flex;
      width: 100%;
    }
    .newgame-list-item {
      flex: 6;
      // margin-right: 10px;
    }

    .newgame-list-item:last-child {
      /* 在这里编写样式 */
      margin-right: 0;
    }
  }
}
.hot-newgame {
  /* 在这里编写样式 */
  padding: 18px;
  margin-right: 0;
  margin-top: 16px;
  background: #fff;
  .newgame-list {
    display: flex;
    .newgame-list-item {
      flex: 6;
      // margin-right: 10px;
    }

    .newgame-list-item:last-child {
      /* 在这里编写样式 */
      margin-right: 0;
    }
  }
}
.footer {
  width: 100%;
  height: 92px;
  background-color: rgb(109 102 102);
  z-index: 9999;
  position: relative;
  margin-top: 20px;
  .footer-mid {
    margin: 0 auto;
    overflow: hidden;
    font-size: 16px;
    width: 810px;
  }
}
.user-border {
  height: 4px;
  background: #409eff;
}
// 1122
</style>
